// import React from 'react'
import { Grid } from "antd-mobile";
import { loadPaoAPI } from "../services/home";
import { useEffect, useState } from "react";
import { dalImg } from "../utils/tools";
import { Link } from "react-router-dom";

function Classification() {
  const [list, setList] = useState([]);
  useEffect(() => {
    loadPaoAPI().then((res) => {
      setList(res.data.list);
      console.log(res);
    });
  }, []);
  return (
    <div>
      <Grid columns={3} gap={8}>
        {list.map((item) => (
          <Grid.Item key={item.id}>
            <div className="grid-demo-item-block">
              <Link to={`/${item.id}`}>
                <img src={dalImg(item.image)} alt="" />
                {item.name}
              </Link>
            </div>
          </Grid.Item>
        ))}
      </Grid>
    </div>
  );
}

export default Classification;
